<template>
  <el-card style="width: 100%">
    <el-row :gutter="20" class="header">
      <el-button
        class="filter-item"
        type="primary"
        icon="Plus"
        @click="handleCreate"
      >
        添加
      </el-button>
    </el-row>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading..."
      border
      fit
      highlight-current-row
      class="listTable"
    >
      <el-table-column
        v-for="item in options"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
      >
        <template #default="scope" v-if="item.prop === 'logo'">
          <el-image
            v-if="scope.row[item.prop]"
            :src="scope.row[item.prop]"
            :preview-src-list="[scope.row[item.prop]]"
            fit="contain"
            style="width: 50px; height: 50px"
          />
        </template>
        <template #default="scope" v-else-if="item.htmlCtrl === 'Switch'">
          <el-switch v-model="scope.row[item.prop]" disabled />
        </template>
        <template #default="scope" v-else-if="item.htmlCtrl === 'DateTime'">
          {{ formatDateTime(scope.row[item.prop]) }}
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleUpdate(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <Dialog
      v-model="dialogVisible"
      :dialog-visible="dialogVisible"
      :dialog-title="dialogTitle"
      :dialog-table-value="dialogTableValue"
      @init-get-list="getList"
    />
  </el-card>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { getBrands, deleteBrand } from "@/api/brand";
import { options } from "./options";
import Dialog from "./components/dialog.vue";
import { ElMessageBox, ElMessage } from "element-plus";

const list = ref([]);
const listLoading = ref(true);
const dialogVisible = ref(false);
const dialogTitle = ref("");
const dialogTableValue = ref({});

const getList = async () => {
  try {
    listLoading.value = true;
    const response = await getBrands();
    list.value = response.data;
  } catch (error) {
    console.error("获取品牌列表失败:", error);
  } finally {
    listLoading.value = false;
  }
};

const handleCreate = () => {
  dialogTableValue.value = {
    brandIsShow: true,
    brandSort: 0,
  };
  dialogTitle.value = "添加品牌";
  dialogVisible.value = true;
};

const handleUpdate = (row) => {
  dialogTableValue.value = { ...row };
  dialogTitle.value = "编辑品牌";
  dialogVisible.value = true;
};

const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该品牌吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      await deleteBrand(row.brandId);
      ElMessage({
        type: "success",
        message: "删除成功!",
      });
      getList();
    })
    .catch((err) => {
      console.error("删除失败:", err);
    });
};

// 添加时间格式化函数
const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return "";
  const date = new Date(dateTimeString);
  return date
    .toLocaleDateString("zh-CN", {
      year: "numeric",
      month: "2-digit",
      day: "2-digit",
    })
    .replace(/\//g, "-");
};

onMounted(() => {
  getList();
});
</script>

<style src="@/css/list.css"></style>
